<template>
<el-dialog :visible.sync="visible" title="详情" :close-on-click-modal="false" :close-on-press-escape="false" @close="close()" width="70%" :destroy-on-close="true" @opened="opened()">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'">
        <el-row>
            <el-col :span="8">
                <el-form-item label="旅行社名称" prop="name">
                    {{dataForm.name||'--'}}
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="旅行社编码" prop="code">
                     {{dataForm.code||'--'}}
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="联系人姓名" prop="linkName">
                    {{dataForm.linkName||'--'}}
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="联系人号码" prop="linkPhone">
                     {{dataForm.linkPhone||'--'}}
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="经度" prop="longitude">
                    {{dataForm.longitude||'--'}}
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="纬度" prop="latitude">
                    {{dataForm.latitude||'--'}}
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="类型" prop="type">
                    {{$getDictLabel('travel_type',dataForm.type)}}
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="评分" prop="score">
                    {{dataForm.score||'--'}}
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="备注" prop="remark">
                    {{dataForm.remark||'--'}}
                </el-form-item>
            </el-col>
              <el-col :span="24">
                <el-form-item label="所在地址" prop="">
                    {{dataForm.province}}-{{dataForm.city}}-{{dataForm.area}}-{{dataForm.street}}-{{dataForm.areaDetail}}
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="详情介绍" prop="info">
                    {{dataForm.info||'--'}}
                </el-form-item>
            </el-col>

        </el-row>

    </el-form>
    <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
import mixinRegionModule from "@/mixins/region-module";

export default {
    mixins: [mixinRegionModule],
    data() {
        return {
            visible: false,
            dataForm: {
                id: "",
                name: "",
                code: "",
                linkName: "",
                linkPhone: "",
                province: "",
                city: "",
                area: "",
                street: "",
                areaDetail: "",
                longitude: "",
                latitude: "",
                type: "",
                score: "",
                info: "",
                remark: "",
            },
        };
    },
    props: {
        disabled: Boolean
    },
    computed: {
        dataRule() {
            return {
                name: [{
                    required: true,
                    message: "请输入旅行社名称",
                    trigger: "blur"
                }, ],
                linkName: [{
                    required: true,
                    message: "请输入联系人姓名",
                    trigger: "blur"
                }, ],
                linkPhone: [{
                    required: true,
                    message: "请输入联系人号码",
                    trigger: "blur"
                }, ],
                latitude: [{
                        required: true,
                        message: "请输入纬度",
                        trigger: "blur"
                    },
                    {
                        validator: this.$formValidate.validateDecimal("纬度", 11, 8),
                        trigger: ["blur"],
                    },
                ],
                longitude: [{
                        required: true,
                        message: "请输入经度",
                        trigger: "blur"
                    },
                    {
                        validator: this.$formValidate.validateDecimal("经度", 11, 8),
                        trigger: ["blur"],
                    },
                ],
            };
        },
    },
    methods: {
        opened() {
            this.provincAreaDetailInfoList();
            if (this.dataForm.city) {
                this.cityAreaDetailInfoList(this.dataForm.province);
            }
            if (this.dataForm.area) {
                this.countyAreaDetailInfoList(this.dataForm.city);
            }
        },
        close() {
            this.dataForm = {
                id: "",
                name: "",
                code: "",
                linkName: "",
                linkPhone: "",
                province: "",
                city: "",
                area: "",
                street: "",
                areaDetail: "",
                longitude: "",
                latitude: "",
                type: "",
                score: "",
                info: "",
                remark: "",
            };
            this.$emit("changeDisabled");
        },

        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.$http
                .get("/sys/istravel/" + this.dataForm.id)
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };
                    this.dataForm.type = this.dataForm.type + "";
                    this.$refs.type.selectValue = this.dataForm.type;
                })
                .catch(() => {});
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.$http[!this.dataForm.id ? "post" : "put"](
                            "/sys/istravel/",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
                });
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>
<style scoped>
::v-deep .el-form-item__label{
  color:#111;
}
</style>
